<template>
  <view class="container">
    <!-- 课程表头部 -->
    <view class="table-header">
      <view class="time-column">时间</view>
      <!-- 循环创建时间轴列 -->
      <view v-for="(time, index) in timemap" :key="index" class="time-column">{{ time.start }} - {{ time.end }}</view>
    </view>
    <!-- 课程表主体 -->
    <view class="table-body">
      <!-- 循环创建每周的课程信息 -->
      <view v-for="(week, weekIndex) in howjc" :key="weekIndex">
        <view class="week-header">{{ week }}周</view>
        <!-- 循环创建每天的课程信息 -->
        <view v-for="(day, dayIndex) in dayList" :key="dayIndex">
          <view class="day-header">{{ day.day }}</view>
          <!-- 循环创建每天的课程信息 -->
          <view v-for="(item, itemIndex) in nowtbale" :key="itemIndex">
            <!-- 判断课程是否在当前周和当前天 -->
            <view class="class-item" v-if="item.week === week && item.day === day.day">
              <view class="class-name">{{ item.name }}</view>
              <view class="class-info">
                <view class="class-info-item">{{ item.nums }} - {{ item.enums }}节</view>
                <view class="class-info-item">{{ item.teacher }}</view>
                <view class="class-info-item">{{ item.room }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 模拟的后端数据
const nowtbale = ref([
  { name: "高等数学", nums: 1, enums: 2, week: 1, day: 1, teacher: "张三", room: "101教室" },
  // ...更多课程数据
]);

// 模拟的时间轴数据
const timemap = ref([
  { start: "8:00", end: "8:45" },
  { start: "8:55", end: "9:40" },
  // ...更多时间数据
]);

// 模拟的周次数据
const howjc = ref([1, 2, 3, 4, 5, 6, 7]);

// 模拟的日期数据
const dayList = ref([
  { day: "一", time: "2024-02-26" },
  { day: "二", time: "2024-02-27" },
  // ...更多日期数据
]);

// 方法可以用来处理数据，如过滤、排序等

onMounted(() => {
  // 在这里可以添加一些初始化逻辑
});
</script>